<template>
  <div class="page-body">
    <el-form size="small" :inline="true" ref="form" :model="myForm">
      <el-form-item>
        <el-input size="small" clearable v-model.trim="myForm.name1" placeholder="请输入商户名称" maxlength="30"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input size="small" clearable v-model.trim="myForm.name2" placeholder="请输入商户编码" maxlength="30"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input size="small" clearable v-model.trim="myForm.name3" placeholder="请输入法人名称" maxlength="30"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input size="small" clearable v-model.trim="myForm.name4" placeholder="请输入联系电话" maxlength="11"></el-input>
      </el-form-item>
      <el-form-item>
        <el-select size="small" clearable v-model="myForm.status" placeholder="请选择启用状态">
          <el-option v-for="item in status1DataList" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" class="width_104" @click="getPageDataList()">查询</el-button>
        <el-button size="small" class="width_104" @click="reset()">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table class="margin_top_20" ref="multipleTableContent" :data="pageData" stripe :header-cell-style="tableHeaderStyle" v-loading="loading">
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column prop="mchName" label="商户名称" width="165">
        <template slot-scope="scope" class="relative">
          <el-badge :value="'供'" class="item" v-if="scope.row.status == 1">
            <div class="text-ellipsis" :title="scope.row.mchName">{{ scope.row.mchName }}</div>
          </el-badge>
          <div class="text-ellipsis" :title="scope.row.mchName" v-else>{{ scope.row.mchName }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="mchNo" label="商户编码"></el-table-column>
      <el-table-column prop="contactPhone" label="商户电话"></el-table-column>
      <el-table-column prop="ledgerName" label="法人代表"></el-table-column>
      <el-table-column prop="equipmentCount" label="设备数"></el-table-column>
      <el-table-column prop="creatorName" label="创建人"></el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column prop="status" label="审批状态">
        <template slot-scope="scope">
          <el-tag size="small" v-if="scope.row.status == 0">未审核</el-tag>
          <el-tag size="small" v-else-if="scope.row.status == 1">已通过</el-tag>
          <el-tag size="small" v-else-if="scope.row.status == 2">已拒绝</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="270">
        <template slot-scope="scope">
          <button class="my-btn my-btn--mini my-btn--primary plain" @click="showDetail(scope.row)" v-if="scope.row.status == 0 || scope.row.status == 1 || scope.row.status == 2">详情</button>
          <button class="my-btn my-btn--mini my-btn--primary plain" @click="agreeReview(scope.row)" v-if="scope.row.status == 0">同意</button>
          <button class="my-btn my-btn--mini my-btn--danger plain" @click="rejectReview(scope.row)" v-if="scope.row.status == 0">拒绝</button>
        </template>
      </el-table-column>
    </el-table>
    <div class="text-center">
      <br />
      <el-pagination background @size-change="handleSizeChange" @current-change="handlePagingChange" :current-page="pageIndex" :page-sizes="pageSizes" :page-size="pageSize" :layout="paginationLayout" :total="pageCount"> </el-pagination>
    </div>
  </div>
</template>

<script>
import Setting from '@/settings'
import { GetMerchantReviewPaging, ChangeMerchantReviewStatus } from '@/views/merchant-management/services'
export default {
  data() {
    return {
      pageIndex: 1,
      pageSize: Setting.defaultTablePaginationSize,
      pageSizes: Setting.tablePaginationSizes,
      tableHeaderStyle: Setting.tableHeaderStyle,
      paginationLayout: Setting.tablePaginationLayout,
      loading: false,
      pageData: [],
      pageCount: 0,
      myForm: {
        name1: '',
        name2: '',
        name3: '',
        name4: '',
        status: '',
      },
      status1DataList: [
        { value: '0', label: '未审核' },
        { value: '1', label: '已通过' },
        { value: '2', label: '已拒绝' },
      ],
    }
  },
  created() {
    this.getPageDataList()
  },
  methods: {
    handlePagingChange(event) {
      this.pageIndex = event
      this.getPageDataList()
    },
    handleSizeChange(event) {
      this.pageIndex = 1
      this.pageSize = event
      this.getPageDataList()
    },
    getPageDataList() {
      this.loading = true
      GetMerchantReviewPaging({
        // sort: , // true 倒序  false 正序
        // sortField: , // 为空根据提交时间排序
        // mchId: this.myForm.name1, // 商户id
        mchName: this.myForm.name1, // 商户名
        mchNo: this.myForm.name2, // 商户编码
        ledgerName: this.myForm.name3, // 法人名称
        contactPhone: this.myForm.name4, // 联系电话
        status: this.myForm.status, // 审核状态：0代表未审核，1代表已通过，2代表已拒绝
        pageNum: this.pageIndex,
        pageSize: this.pageSize,
      })
        .finally(() => (this.loading = false))
        .then(res => {
          if (res && res.code == 200) {
            this.pageData = res.data.list
            this.pageCount = res.data.total

            if ((!res.data.list || !res.data.list.length) && this.pageIndex > 1) {
              this.pageIndex = 1
              this.getPageDataList()
            }
          }
        })
    },
    reset() {
      this.pageIndex = 1
      this.myForm.name1 = ''
      this.myForm.name2 = ''
      this.myForm.name3 = ''
      this.myForm.name4 = ''
      this.myForm.status = ''
      this.getPageDataList()
    },
    agreeReview(rowData) {
      this.$confirm(`您将通过${rowData.mchName}的申请，是否继续？`, {
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        closeOnPressEscape: false,
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            ChangeMerchantReviewStatus({ id: rowData.id, status: 1, mchId: rowData.mchId })
              .finally(() => (instance.confirmButtonLoading = false))
              .then(res => {
                if (res && res.code == 200) {
                  this.$message.success('操作成功!')
                  done()
                } else {
                  this.$message.error(res.msg)
                }
              })
          } else {
            done()
          }
        },
      })
    },
    rejectReview(rowData) {
      this.$confirm(`您将拒绝${rowData.mchName}的申请，是否继续？`, {
        type: 'warning',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        closeOnPressEscape: false,
        beforeClose: (action, instance, done) => {
          if (action === 'confirm') {
            instance.confirmButtonLoading = true
            ChangeMerchantReviewStatus({ id: rowData.id, status: 2, mchId: rowData.mchId })
              .finally(() => (instance.confirmButtonLoading = false))
              .then(res => {
                if (res && res.code == 200) {
                  this.$message.success('操作成功!')
                  done()
                } else {
                  this.$message.error(res.msg)
                }
              })
          } else {
            done()
          }
        },
      })
    },
    showDetail(rowData) {
      //点击查看详情
      this.$router.push({
        name: 'MerchantReviewDetails',
        params: { status: rowData.status },
        query: { id: rowData.mchId },
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.width_104 {
  width: 104px;
}
::v-deep .el-table .cell {
  overflow: visible;
}
</style>
